/**
 * Animations
 */

@-webkit-keyframes crZoomInOut{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}

@keyframes crZoomInOut{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}



@-webkit-keyframes crZoomInOutInvisible{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes crZoomInOutInvisible{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(1.6);
        opacity: 0;
    }
}



@-webkit-keyframes crFadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes crFadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}


@-webkit-keyframes crSlideInDown{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes crSlideInDown{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(0);
    }
}



@-webkit-keyframes crBounceIn {
    20%,
    40%,
    60%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes crBounceIn {
    20%,
    40%,
    60%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes crSlideInRight{
    0%{
        transform: translateX(150px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes crSlideInRight{
    0%{
        transform: translateX(150px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}


@-webkit-keyframes carInOutAnimation{
    0%{
        transform: translateX(200%);
    }
    18%{
        transform: translateX(-5%);
    }
    20%{
        transform: translateX(5%);
    }
    22%{
        transform: translateX(0);
    }
    78%{
        transform: translateX(0);
    }
    80%{
        transform: translateX(-5%);
    }
    82%{
        transform: translateX(5%);
    }
    100%{
        transform: translateX(-200%);
    }
}

@keyframes carInOutAnimation{
    0%{
        transform: translateX(200%);
    }
    18%{
        transform: translateX(-5%);
    }
    20%{
        transform: translateX(5%);
    }
    22%{
        transform: translateX(0);
    }
    78%{
        transform: translateX(0);
    }
    80%{
        transform: translateX(-5%);
    }
    82%{
        transform: translateX(5%);
    }
    100%{
        transform: translateX(-200%);
    }
}